Hello I'm trying to display a video using template literals everything is working fine but now I wish to hide the template if the video field in firestore is empty or doesn't exists
If the field video has the embbed value in firestore the video correctly displays
But if the field video doesn't have any value then the iframe tag still shows up and I'd like to hide it
Here is my code
const video = document.getElementById('video');
let path3 = `Ludolab/offer/list/${idRef}/index/${idCon}/content`;
let collRef3 = db.collection(path3);
collRef3.onSnapshot((querySnapshot) => {
video.innerHTML = '';
querySnapshot.forEach((doc) => {
video.innerHTML +=`
<iframe class="has-ratio" width="150" height="150" src="https://www.youtube.com/embed/${doc.data().video}"
frameborder="0" allowfullscreen>
</iframe>
`
});
});
Any help is gladly appreciate it, thanks in advance.
You can add a simple if statement that adds another iframe only when video field is present:
collRef3.onSnapshot((querySnapshot) => {
video.innerHTML = '';
querySnapshot.forEach((doc) => {
if (doc.data().video) {
// video field present, add iframe
video.innerHTML += `
<iframe class="has-ratio" width="150" height="150" src="https://www.youtube.com/embed/${doc.data().video}"
frameborder="0" allowfullscreen>
</iframe>`
}
});
});